<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>物品申请列表</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-clipboard-list me-2"></i>物品申请列表</h2>
            <div>
                <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-primary">
                    <i class="fas fa-arrow-left me-2"></i>返回物品详情
                </a>
            </div>
        </div>
        
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">物品信息</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 text-center">
                        <img th:if="${item.imagePath != null}" th:src="${item.imagePath}" class="img-fluid rounded" alt="物品图片"
                             style="max-height: 150px; width: auto;">
                        <img th:if="${item.imagePath == null}" src="/static/images/no-image.svg" class="img-fluid rounded" alt="无图片"
                             style="max-height: 150px; width: auto;">
                    </div>
                    <div class="col-md-9">
                        <h4 th:text="${item.title}">物品标题</h4>
                        <p class="text-muted" th:text="${item.description}">物品描述</p>
                        <div class="d-flex gap-3">
                            <div>
                                <strong>状态:</strong>
                                <span class="badge" th:classappend="${
                                    item.status.name() == 'LOST' ? 'bg-danger' : 
                                    item.status.name() == 'FOUND' ? 'bg-success' : 
                                    'bg-info'
                                }" th:text="${item.status != null ? item.status.displayName : '未知'}">状态</span>
                            </div>
                            <div>
                                <strong>类型:</strong>
                                <span class="badge bg-secondary" th:text="${item.type != null ? item.type.displayName : '未知'}">类型</span>
                            </div>
                            <div>
                                <strong>发布者:</strong>
                                <span th:text="${item.user.username}">用户名</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0" th:text="${item.status.name() == 'LOST' ? '找到物品申请列表' : '认领申请列表'}">申请列表</h5>
            </div>
            <div class="card-body">
                <div th:if="${claims.isEmpty()}" class="text-center py-5">
                    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                    <p class="lead" th:text="${item.status.name() == 'LOST' ? '暂无找到物品的申请' : '暂无认领申请'}">暂无申请记录</p>
                </div>
                
                <div th:unless="${claims.isEmpty()}" class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>类型</th>
                                <th th:text="${item.status.name() == 'LOST' ? '提交者' : '认领者'}">申请人</th>
                                <th th:text="${item.status.name() == 'LOST' ? '找到说明' : '认领说明'}">申请说明</th>
                                <th th:text="${item.status.name() == 'LOST' ? '提交时间' : '认领时间'}">申请时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="claim : ${claims}">
                                <td th:text="${claim.id}">ID</td>
                                <td>
                                    <span class="badge bg-secondary" th:text="${claim.claimType.displayName}">申请类型</span>
                                </td>
                                <td th:text="${claim.claimer.username}">申请人</td>
                                <td th:text="${#strings.abbreviate(claim.description, 50)}">申请说明</td>
                                <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm')}">申请时间</td>
                                <td>
                                    <span class="badge" th:classappend="${
                                        claim.status.name() == 'PENDING' ? 'bg-warning' : 
                                        claim.status.name() == 'APPROVED' ? 'bg-success' : 
                                        'bg-danger'
                                    }" th:text="${claim.status.displayName}">状态</span>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <a th:href="@{/claims/{id}(id=${claim.id})}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <div th:if="${claim.status.name() == 'PENDING' && item.user != null && currentUser != null && item.user.id == currentUser.id}" class="btn-group">
                                            <form th:action="@{/claims/{id}/status(id=${claim.id})}" method="post" class="d-inline">
                                                <input type="hidden" name="status" value="APPROVED">
                                                <button type="submit" class="btn btn-sm btn-success ms-1">
                                                    <i class="fas fa-check"></i> 
                                                    <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '批准' : '确认'}">批准</span>
                                                </button>
                                            </form>
                                            <form th:action="@{/claims/{id}/approve-complete(id=${claim.id})}" method="post" class="d-inline">
                                                <button type="submit" class="btn btn-sm btn-primary ms-1">
                                                    <i class="fas fa-check-circle"></i> 
                                                    <span th:text="${claim.claimType.name() == 'CLAIM_FOUND' ? '批准并完成' : '确认并完成'}">批准并完成</span>
                                                </button>
                                            </form>
                                            <form th:action="@{/claims/{id}/status(id=${claim.id})}" method="post" class="d-inline">
                                                <input type="hidden" name="status" value="REJECTED">
                                                <button type="submit" class="btn btn-sm btn-danger ms-1">
                                                    <i class="fas fa-times"></i> 拒绝
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 